<template>
    <div class="device-check-card">
        <div class="card-content">
            <div class="check-title-box">
                <span class="check-title">
                    {{detailData.pointinspectionname}}
                </span>
            </div>
            <div class="check-result">
                <div class="result-title">检查结果</div>
                <div class="result-content">
                    <wp-icon
                        v-if="detailData.pointinspectionresultstatus"
                        :name="status[detailData.pointinspectionresultstatus].icon"
                        :size="18" />
                    {{detailData.pointinspectionresult}}</div>
            </div>
            <div class="check-remark">
                <div class="remark-title">备注</div>
                <div class="remark-content">{{detailData.remark}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import WpIcon from '@/components/_wp_components/WpIcon.vue';
import { maintainCheckStatus } from '@/consts/maintaincheck.consts';
export default {
    components: {
        WpIcon
    },
    props: {
        detailData: Object
    },
    data () {
        return {
            status: maintainCheckStatus
        };
    }

};
</script>

<style lang="scss" scoped>
.device-check-card{
    margin: 0 auto;
    border-radius:12px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    margin-top: 20px;
    background-color: white;
    height:182px ;
    width: 90vw;
    .card-content{
        height: 150px;
        width: 80vw;
        margin:0 auto;
        padding-top: 12px;
        .check-title-box{
                display: flex;
                width: 80vw;
            .check-title{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 17px;
                border-bottom-width: 4px;
                border-bottom-color:#BADEFF;
                border-bottom-style:solid;
            }
        }
        .check-result{
            display: flex;
            margin-top: 25px;
            font-size: 13px;
            .result-title{
                width: 55px;
                color: rgba(0,0,0,0.6);
            }
            .result-content{
                width: 55vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left: 46px;
                color: rgba(0,0,0);

            }
        }
        .check-remark{
            display: flex;
            margin-top: 8px;
            font-size: 13px;
            .remark-title{
                width: 55px;
                color: rgba(0,0,0,0.6);
            }
            .remark-content{
                margin-top: -1px;
                line-height: 20px;
                display: -webkit-box;
                margin-left: 46px;
                color: rgba(0,0,0);
                width: 55vw;
                overflow: hidden;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;

            }
        }
    }
}
</style>
